<template>
  <div>
    <ButtonGroup style="margin-bottom:10px"> 
      <Button type="primary" @click="modal1 = true" icon="plus">添加用户</Button>
      <Button type="warning" @click="onDeletes" icon="android-remove">删除用户</Button>   
    </ButtonGroup >
    <ButtonGroup style="float:right;margin-bottom:10px"> 
        <Input v-model="searchwords.name" style="width: 300px">
        <Button  slot="append"  icon="ios-search" @click='keyWordsSearch'>Search</Button>
        </Input> 
   </ButtonGroup>    
      <!-- 表格 -->
    <i-table border :columns="columns1" :data="userdata" :loading="loading" @on-selection-change="onSelectChange"></i-table>
    <!-- 分页 -->
    <Page :total="Page.total" size="small" show-elevator show-sizer style="margin-top:10px"
    :page-size="Page.limit" :current="Page.page" @on-change="pageChange" 
    @on-page-size-change='limitChange'></Page>
    
    <Modal
        v-model="modal1"
        title="Users Modal dialog box title"
        @on-ok="ok"
        @on-cancel="cancel">
       <Form ref="formValidate" :model="formValidate" :label-width="50">
        <FormItem label="Name" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
        <FormItem label="E-mail" prop="mail">
            <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
        </FormItem>
        <FormItem label="City" prop="city">
            <Input v-model="formValidate.city" placeholder="Enter your city"></Input>
        </FormItem>
        <FormItem label="Gender" prop="gender">
            <RadioGroup v-model="formValidate.gender">
                <Radio label="male">Male</Radio>
                <Radio label="female">Female</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="Hobby" prop="interest">
            <CheckboxGroup v-model="formValidate.interest">
                <Checkbox label="Eat"></Checkbox>
                <Checkbox label="Sleep"></Checkbox>
                <Checkbox label="Run"></Checkbox>
                <Checkbox label="Movie"></Checkbox>
            </CheckboxGroup>
        </FormItem>
        <FormItem label="Desc" prop="desc">
            <!-- <Input v-model="formValidate.desc" type="textarea" placeholder="Enter something..."></Input> -->
            <quill-editor :content="formValidate.desc"
                @change="onEditorChange($event)">
            </quill-editor>
            <!-- </Input> -->
        </FormItem>
         <FormItem label="pword" prop="password">
            <Input v-model="formValidate.password" type="password" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
        <FormItem  prop="_id" style='display:none'>
            <Input v-model="formValidate._id"></Input>
        </FormItem>
    </Form>
    </Modal>
   
  </div>

</template>
<script>
import md5 from 'crypto-js/md5';
    export default {
        data () {
            return {
                Page:{
                    total:20,
                    page:1,
                    limit:5
                },
                // 是否开启加载
                loading:true,
                columns1: [
                     {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        
                    },
                    {
                        title: '姓名',
                        key: 'name',
                       
                    },
                    {
                        title: '邮箱',
                        key: 'mail'
                    },
                    {
                        title: '地址',
                        key: 'city'
                    },
                     {
                        title: '性别',
                        key: 'gender',
                    },
                     {
                        title: '描述',
                        key: 'desc',
                        type:'html' ,
                        
                    },
                    
                   {
                        title: '操作',
                        key: 'action',
                        // width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                userdata: [ ],
                modal1:false,
                 formValidate: {
                    name: '',
                    mail: '',
                    password:'',
                    city: '',
                    gender: 'male',
                    interest: [],
                    desc: '',
                },
                searchwords:{
                    name:''
                },
                // 选择多个的ID
                ids:[]
                
            }
        },
        methods:{
            // 获取编辑器内容变化函数
        onEditorChange({ quill, html, text }) {
            this.formValidate.desc = html;
            // console.log('editor change!',  html);
        },
            // 获取当前页和每页显示条数
        pageChange(page){
            this.Page.page=page;          
            this.getData(this.Page);
        },
        limitChange(limit){

        this.Page.limit=limit;
        this.getData(this.Page);
        },
        // 获取数据函数
          getData(obj){
            if(obj){
            this.$http.post('http://10.31.153.35:3000/users/list',obj).then((response) => {
            // response.response.data.docs;
            this.userdata=response.data.docs;
            this.Page.total=response.data.total;
            this.Page.page=response.data.page;
            }) 
              }else{
            this.$http.post('http://10.31.153.35:3000/users/list').then((response) => {
            this.userdata=response.data.docs;
            this.Page.total=response.data.total;
            this.Page.page=response.data.page;
            })
              } 
          },
          remove(params){
            //   删除用户数据
            var id=params.row._id;
            this.$http.delete(`http://10.31.153.35:3000/users/data/${id}`).then((response) => {
            //  console.log(response);
                if(response.status==200){
                    this.$Message.info(response.data.message);
                    this.getData();
                }
            })
          },
        edit(params){
        //    修改用户数据
             this.formValidate=params.row;
            this.modal1=true;
          },  
        // model框ok，取消按钮事件
        ok () {
            this.modal1=false;
            this.$Message.info('Clicked ok');
        },
        cancel () {
            this.$Message.info('Clicked cancel');
        },
        // 表单提交和取消事件
         handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) { 
                   
                    if(!this.formValidate._id){
                        // console.log(1111);
                         this.formValidate.password= md5(this.formValidate.password).toString(); 
                        console.log(this.formValidate.password)  ;                             
                        this.$http.post('http://10.31.153.35:3000/users/data',this.formValidate).then((response) => {
                                //  console.log(response.data);
                            this.getData(this.Page);
                            this.$refs[name].resetFields();
                            this.ok();
                            this.$Message.success('created!');
                        })
                    }else{  
                       
                        let id=this.formValidate._id;
                        this.$http.put(`http://10.31.153.35:3000/users/data/${id}`,this.formValidate)
                        .then((response) => {
                        // console.log(response.data);
                        this.getData(this.Page);
                        this.$refs[name].resetFields();
                        this.ok();
                        this.$Message.success('update!');
                    })
                    }
              
                } else {
                    this.$Message.error('Fail!');
                }
            })
            },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        // 根据姓名查询
        keyWordsSearch(){
             this.$http.post('http://10.31.153.35:3000/users/list',this.searchwords)
             .then((response) => {
                    this.userdata=response.data.docs;
                })
        },
        // 选择多个
      onSelectChange(selection){
          let ids=[];
          for(let i in selection){
            ids.push(selection[i]._id) ;
          }
          this.ids=ids;
      },
    //   多个批量删除
    onDeletes(){
        this.$http.post('http://10.31.153.35:3000/users/data/removes',{ids:this.ids})
        .then((response) => {
        // console.log(response)
        this.$Message.success(response.data.message);
        this.getData();
    })
    }
    //   分页操作  
        },
        created(){
             this.getData();
             setTimeout(() => {
                 this.loading=false
             }, 1000);
        },
       
    }
</script>
<style>
img{
    height:50px;
    width:50px;
}

</style>
